<!DOCTYPE html>
<html>
    <header>
        <meta charset="utf-8">
        <title>html study div</title>
    </header>

    <body>
        <div id="container" style="width: 800px">
            <div id="header" style="background-color:blueviolet">
                <h1 style="margin-bottom: 0">主要的网页标题</h1>
                <h1 style="margin-bottom: 0">主要的网页标题</h1>
                <img src="DSC_0991.jpg" height="200px">
            </div>

            <div id="menu" style="background-color:blue; width: 200px;height: 400px;float:left">
                dlkfj
                dlkfj
                <p>需要float left，否则下面那个还是在下方显示</p>
            </div>

            <!--上面那个div要float left，下面这个div才在右边显示，否则还是在下方显示-->   
            <div id="content" style="background-color:chartreuse;width:600px;height:400px;float: left">
                <p style="margin-top:0px">在这里布局内容</p>
                <p>此div如果没有float left，左上角起点还是从页面的左边布局，不是放在上一个div的右边</p>
            </div>

            <div id="version" style="background-color:yellow;height: 200px;clear:both">
                版权申明
                
            </div>
        </div>
    </body>
</html>









